{extend name="default/layout" /}

{block name="title"}{$title}{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 面包屑导航 -->
    <nav class="mb-6">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li><a href="/" class="hover:text-blue-600">首页</a></li>
            <li><span class="mx-2">/</span></li>
            <li><a href="{$goods.url}" class="hover:text-blue-600">{$goods.name}</a></li>
            <li><span class="mx-2">/</span></li>
            <li class="text-gray-900">{$chapter.title}</li>
        </ol>
    </nav>

    <div class="mx-auto">
        <!-- 章节标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">{$chapter.title}</h1>
            <div class="flex items-center space-x-4 text-sm text-gray-500">
                <span class="flex items-center space-x-1">
                    <i class="fas fa-file-alt text-orange-500"></i>
                    <span>文本</span>
                </span>
                <span>所属商品：{$goods.name}</span>
            </div>
        </div>

        <!-- 长文本内容 -->
        <div class="bg-white rounded-sm  border">
            {if $has_auth}
                <div class="p-6">
                    <div class="prose prose-lg max-w-none">
                        {if isset($chapter.longtext_content)}
                            {$chapter.longtext_content|raw}
                        {else}
                            {$chapter.content|raw}
                        {/if}
                    </div>
                </div>
            {else}
                <div class="text-center py-12">
                    <div class="mb-4">
                        <i class="fas fa-lock text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">内容已锁定</h3>
                    <p class="text-gray-500 mb-6">购买商品后即可查看完整长文本内容</p>
                    <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-shopping-cart mr-2"></i>
                        立即购买
                    </a>
                </div>
            {/if}
        </div>

        <!-- 返回商品详情 -->
        <div class="mt-6 text-center">
            <a href="{$goods.url}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                返回商品详情
            </a>
        </div>
    </div>
</div>

<style>
/* 长文本专用样式 */
.prose {
    line-height: 1.8;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
}

.prose h1 {
    font-size: 1.875rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.prose h2 {
    font-size: 1.5rem;
}

.prose h3 {
    font-size: 1.25rem;
}

.prose p {
    margin-bottom: 1.5em;
    text-align: justify;
}

.prose img {
    margin: 2em auto;
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 1.5em 0;
    background-color: #f8fafc;
    padding: 1rem;
    border-radius: 0.375rem;
}

.prose code {
    background-color: #f1f5f9;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5em 0;
}

.prose ul, .prose ol {
    margin: 1.5em 0;
    padding-left: 1.5rem;
}

.prose li {
    margin: 0.5em 0;
}
</style>
{/block}
